<template>
    <div class=con_store_main>
        <!--新增窗口-->
        <el-dialog title="新增店铺" :visible.sync="addBox" width="50%" :close-on-click-modal="true" center>
            <div>
                <el-form :model="addForm" :rules="rules" ref="addForm">
                    <el-form-item label="店铺名称" prop="storeName">
                        <el-input v-model="addForm.storeName" placeholder="输入店铺名称"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺简介" prop="storeIntroduction">
                        <el-input v-model="addForm.storeIntroduction" placeholder="输入店铺简介"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺地址" prop="storeAddress">
                        <el-input v-model="addForm.storeAddress" placeholder="输入店铺地址"></el-input>
                    </el-form-item>
                    <div>
                        <el-button @click="confirmAdd">確認添加</el-button>
                    </div>
                </el-form>
            </div>

        </el-dialog>
        <!--编辑窗口-->
        <el-dialog title="修改店铺" :visible.sync="updateBox" width="50%" :close-on-click-modal="true" center>
            <div>
                <el-form :model="updateForm" :rules="rules" ref="updateForm">
                    <el-form-item label="店铺名称" prop="storeName">
                        <el-input v-model="updateForm.storeName" placeholder="输入店铺名称"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺简介" prop="storeIntroduction">
                        <el-input v-model="updateForm.storeIntroduction" placeholder="输入店铺简介"></el-input>
                    </el-form-item>
                    <el-form-item label="店铺地址" prop="storeAddress">
                        <el-input v-model="updateForm.storeAddress" placeholder="输入店铺地址"></el-input>
                    </el-form-item>
                    <div>
                        <el-button @click="confirmUpdate">確認修改</el-button>
                    </div>
                </el-form>
            </div>

        </el-dialog>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="店铺名称">
                <el-input v-model="formInline.storeName" placeholder="店铺名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="findData" type="primary" icon="el-icon-search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="addStore" type="primary" icon="el-icon-plus">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table class="table" :data="tableData" style="width: 100%" v-loading="loading"
            :default-sort="{ prop: 'index', order: 'descending' }">
            <el-table-column type="index" label="序号" sortable width="80">
            </el-table-column>
            <el-table-column prop="storeName" label="店铺名称" width="155">
            </el-table-column>
            <el-table-column prop="storeIntroduction" label="店铺简介" width="155">
            </el-table-column>
            <el-table-column prop="storeAddress" width="125" label="店铺地址">
            </el-table-column>
            <el-table-column class="el-status" prop="status" label="营业状态">
                <template slot-scope="scope">
                    <div class="ic-status">
                        <svg style="padding-top: 4px;padding-right: 2px;" v-if="scope.row.status === '正常营业'"
                            t="1718505107697" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2477" width="16" height="16">
                            <path
                                d="M10.53940227 513.08802072c0 277.51113799 224.97261203 502.48276716 502.48276716 502.48276717s502.48276716-224.97261203 502.48276715-502.48276717c0-277.51113799-224.97261203-502.48276716-502.48276715-502.48276715-277.51113799 0-502.48276716 224.97261203-502.48276716 502.48276715z"
                                fill="#23f169" p-id="2478"></path>
                        </svg>
                        <svg style="padding-top: 4px;padding-right: 2px;"
                            v-if="scope.row.status === '暂停营业' || scope.row.status === '禁用中'" t="1718505107697" class="icon"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2477"
                            width="16" height="16">
                            <path
                                d="M10.53940227 513.08802072c0 277.51113799 224.97261203 502.48276716 502.48276716 502.48276717s502.48276716-224.97261203 502.48276715-502.48276717c0-277.51113799-224.97261203-502.48276716-502.48276715-502.48276715-277.51113799 0-502.48276716 224.97261203-502.48276716 502.48276715z"
                                fill="#f47c6c" p-id="2478" data-spm-anchor-id="a313x.search_index.0.i4.7b9f3a817B3mtJ"
                                class=""></path>
                        </svg>
                        {{ scope.row.status }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="editStore(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="deleteStore(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="confirmUpdateStatus(scope.row)">切换状态</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin: auto;margin-top: 8px;" :hide-on-single-page="value"
            :current-page.sync="currentPage" :page-size="6" :pager-count="11" layout="prev, pager, next"
            :total="this.total" @current-change="handleSizeChange">
        </el-pagination>
    </div>
</template>
<script>
import { request } from '@/network/request/request';
export default {
    mounted() {
        this.findData();
    },
    data() {
        return {
            value: false,
            updateBox: false,
            addBox: false,

            updateForm: {
                storeId: 0,
                storeName: '',
                storeIntroduction: '',
                storeAddress: '',
            },
            updateStatus: {
                storeId: 0,
                status: ""
            },
            formInline: {
                StoreName: '',
            },
            loading: false,
            currentPage: 1, // 当前页码  
            pageSize: 6, // 每页显示的记录数  
            total: 0, // 总个数  //默认设置 0
            tableData: [],
            addForm: {
                storeName: '',
                storeIntroduction: '',
                storeAddress: '',
            },
            rules: {
                storeName: [
                    { required: true, message: '请输入店铺名称', trigger: 'blur' },
                ], storeIntroduction: [
                    { required: true, message: '请输入店铺简介', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ], storeAddress: [
                    { required: true, message: '请输入店铺地址', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        time() {
            this.loading = true;
            setTimeout(() => {
                this.loading = false;
            }, 600);
        },
        deleteAlert(row) {
            this.$confirm('此操作将永久删除该店铺, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest(row);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        handleSizeChange() {
            this.findData();
        },
        editStore(row) {
            console.log(row);
            this.updateForm.storeId = row.storeId;
            this.updateForm.storeName = row.storeName;
            this.updateForm.storeAddress = row.storeAddress;
            this.updateForm.storeIntroduction = row.storeIntroduction;
            this.updateBox = true;
        },
        deleteStore(row) {
            console.log(row);
            this.deleteAlert(row);
        },
        addStore() {
            this.addBox = true;
        },
        /* 删除 */
        async deleteRequest(row) {
            console.log(row);
            let id = row.storeId;
            if(row.status==='正常营业'){
                this.$message.error("店铺正在正常营业无法删除")
                return;
            }
            const config = {
                url: `api/user/store/${id}`,/* 通过路径参数 路径参数 */
                method: "delete",
            }
            const res = await request(config);
            if (res.data.code === 1) {
                this.$message({
                    type: 'success',
                    message: '删除成功'
                });
                this.findData();
            } else {
                this.$message({
                    type: 'error',
                    message: res.data.msg,
                });
            }
        },
        /* 分页查询 */
        async findData() {
            this.time();
            const params = {
                currentPage: this.currentPage,/* 当前页码 */
                pageSize: 5,/* 页码大小 */
                email: localStorage.getItem("email"),
                storeName: this.formInline.storeName,/* 店铺名 */
            }
            const config = {
                url: "api/user/store",
                method: "get",
                params: params,
            }
            const res = await request(config);
            if (res.data.code === 1) {
                this.total = res.data.data.total;/* 得到数据的总数 */
                this.tableData = res.data.data.pageList;/* 得到数据 */
            }
        },
        /* 增加 */
        confirmAdd() {
            const config = {
                url: "api/user/store",
                method: "post",
                data: {
                    storeName: this.addForm.storeName,/* 店铺名 */
                    storeIntroduction: this.addForm.storeIntroduction,/* 店铺简介 */
                    storeAddress: this.addForm.storeAddress,/* 店铺地址 */
                    email: localStorage.getItem("email"),/**待办 */
                }
            }
            request(config)
                .then((res) => {
                    if (res.data.code == 1) {
                        this.$message.success("添加成功");
                        this.addBox = false;

                    }
                }).catch((error) => {
                    console.log(error);
                })
            this.findData();
        },
        /* 更新 修改 */
        async confirmUpdate() {
            const config = {
                url: 'api/user/store',
                method: "put",
                data: {
                    storeId: this.updateForm.storeId,
                    storeName: this.updateForm.storeName,
                    storeAddress: this.updateForm.storeAddress,
                    storeIntroduction: this.updateForm.storeIntroduction,
                    email: localStorage.getItem("email"),
                }
            }
            const res = await request(config);
            if (res.data.code === 1) {
                this.$message.success("修改成功");
                this.findData();
                this.updateBox = false;

            }
        },
        async confirmUpdateStatus(row) {
            this.updateStatus.storeId = row.storeId;
            if (row.status === "正常营业") {
                this.updateStatus.status = "暂停营业";
            } else if (row.status === "暂停营业") {
                this.updateStatus.status = "正常营业";
            } else {
                this.updateStatus.status = "禁用中";

            }
            const config = {
                url: 'api/user/store/status',
                method: "put",
                data: {
                    storeId: this.updateStatus.storeId,
                    status: this.updateStatus.status,
                    email: localStorage.getItem("email"),
                }
            }
            const res = await request(config);
            if (res.data.code === 1) {
                this.$message.success("营业状态修改成功");
                this.findData();
                this.updateBox = false;

            }else{
                this.$message.error(res.data.msg);
            }
        },
    }
}
</script>
<style scoped>
.con_store_main {
    height: 498px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.ic-status {
    display: flex;
    align-content: center;
}
</style>